<template>
  <div class="news-container">
    <div
      v-for="(news, index) in newsList"
      :key="index"
      class="news-item"
    >
      <div
        class="news-title"
        @click="handleNewsClick(index)"
      >
        {{ news }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewsList",
  components: {},
  data() {
    return {
      newsList: [
        "加拿大在WTO对中国提起申诉 外交部回应",
        "美高官群聊泄密被批'业余人士' 关键人员华尔兹或下台",
        "特朗普官宣F-47花落波音背后: 若波音洛马内讧其将获益",
        "轿车意外坠河村民紧急救援 车上母亲获救婴儿不幸遇难",
        "男子在足浴店遗失33万名表 11天内被多次转卖后找回天内被多次转卖后找回天内被多次转卖后找回",
        "加拿大在WTO对中国提起申诉 外交部回应",
        "美高官群聊泄密被批'业余人士' 关键人员华尔兹或下台",
        "特朗普官宣F-47花落波音背后: 若波音洛马内讧其将获益",
        "轿车意外坠河村民紧急救援 车上母亲获救婴儿不幸遇难",
        "男子在足浴店遗失33万名表 11天内被多次转卖后找回天内被多次转卖后找回天内被多次转卖后找回",
        "又一则国际外交冲突事件引发关注",
        "科技公司重大突破，新产品即将问世",
      ]
    };
  },
  methods: {
    handleNewsClick(index) {
      // 在这里可以处理点击新闻标题的逻辑，比如跳转到新闻详情页
      console.log(`点击了第 ${index + 1} 条新闻：`, this.newsList[index]);
      this.$router.push({
        path: '/detail',
      })
    }
  }
};
</script>

<style scoped>
.news-container {
  max-width: 365px;
  margin: 0 auto;
  background-color: white;
  /* padding: 10px; */
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
}

.news-item {
  padding: 5px 0;
}

.news-title {
  font-size: 14px;
  color: #333;
  margin: 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-title:hover {
  color: #ff4d4f;
  /* 鼠标悬停时变色 */
  cursor: pointer;
}
</style>